<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
<div id="root"></div>
<script src="../../javascript/react.js"></script>
<script src="../../javascript/react-dom.js"></script>
<script src="../../javascript/babel.js"></script>
<script type="text/babel">
    class App extends React.Component {
        constructor(props) {
            super(props)
            this.state = {
                count: 0,
                classname: "header",
                isActive: true
            }
        }

        render() {
            const {count, isActive} = this.state
            const className = `box1 box2 ${isActive ? 'active' : ''}`
            const classList = ["1", "2", "3"]
            if (isActive) classList.push("active")

            const styleObj={backgroundColor: "red"}

            return (
                <div className="app">
                    {/*绑定基本的属性*/}
                    <h1 title={count}>绑定title属性</h1>
                    {/*绑定class对象写法*/}
                    <div className={className}>绑定class对象写法</div>
                    {/*绑定class数组写法*/}
                    <div className={classList.join(" ")}>绑定class数组写法</div>
                    {/*绑定style对象写法*/}
                    <div style={styleObj}>绑定style对象写法</div>
                </div>
            )
        }
    }

    const root = ReactDOM.createRoot(document.querySelector("#root"))
    root.render(<App/>)
</script>
</body>

</html>
